<template>
  <div class="log-operation">
    <el-collapse class="search-block" style="width: 1120px">
      <el-collapse-item title="条件搜索">
        <!-- 订单编号、客户编号、客户姓名、日志类型、记录时间  -->
        <el-form
          ref="searchLogForm"
          :model="searchLogForm"
          label-position="top"
        >
          <el-form-item class="search-item" label="日志编号" prop="logId">
            <el-input
              type="text"
              v-model="searchLogForm.logId"
              style="width: 300px"
              placeholder="请输入日志编号"
            />
          </el-form-item>
          <el-form-item class="search-item" label="客户编号" prop="userId">
            <el-input
              type="text"
              v-model="searchLogForm.userId"
              style="width: 200px"
              placeholder="请输入客户编号"
            />
          </el-form-item>
          <el-form-item class="search-item" label="客户姓名" prop="username">
            <el-input
              type="text"
              v-model="searchLogForm.username"
              style="width: 200px"
              placeholder="请输入客户姓名"
              maxlength="10"
            />
          </el-form-item>
          <el-form-item class="search-item" label="日志类型" prop="logType">
            <el-select
              v-model="searchLogForm.logType"
              placeholder="请选择日志类型"
              style="width: 200px"
            >
              <el-option label="申请" value="apply"></el-option>
              <el-option label="登录" value="login"></el-option>
              <el-option label="登出" value="exit"></el-option>
              <el-option label="订单" value="order"></el-option>
              <el-option label="其它" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="记录时间" class="search-item" prop="logTime">
            <div class="block">
              <el-date-picker
                v-model="searchLogForm.logTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <div class="search-button" style="margin-top: 100px">
            <el-button
              type="warning"
              icon="el-icon-search"
              @click="getLogTableList()"
              >搜 索</el-button
            >
            <el-button
              icon="el-icon-delete"
              @click="resetSearchForm('searchLogForm')"
              >重 置</el-button
            >
          </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <div class="log-table">
      <el-table :data="logTableList" stripe v-loading="logTableLoading">
        <el-table-column
          prop="log_id"
          label="日志编号"
          align="center"
          width="280px"
        />
        <el-table-column
          prop="user_id"
          label="客户编号"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="user_name"
          label="客户姓名"
          align="center"
          width="120px"
        />
        <el-table-column
          prop="log_type"
          label="日志类型"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.log_type === 'login'">登录</span>
            <span v-else-if="scope.row.log_type === 'exit'">登出</span>
            <span v-else-if="scope.row.log_type === 'apply'">申请</span>
            <span v-else-if="scope.row.log_type === 'order'">订单</span>
            <span v-else>其它</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="msg"
          label="日志内容"
          align="center"
          width="350px"
        />
        <el-table-column
          prop="log_time"
          label="记录时间"
          align="center"
          width="170px"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getLogTableList"
      />
    </div>
  </div>
</template>

<script>
import { getLogList } from "@/api/log";
export default {
  name: "LogOperation",
  data() {
    return {
      logTableList: [],
      logTableLoading: false,
      searchLogForm: {
        logId: "",
        userId: "",
        username: "",
        logType: "",
        logTime: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        logId: "",
        userId: "",
        username: "",
        logType: "",
        firstLogDate: "",
        secLogDate: "",
      },
      total: 0,
    };
  },
  created() {
    this.getLogTableList();
  },
  methods: {
    getLogTableList() {
      this.packParams();
      this.logTableLoading = true;
      getLogList(this.queryParams)
        .then((res) => {
          this.logTableList = res.rows;
          this.total = res.total;
          this.logTableLoading = false;
        })
        .catch((err) => {
          this.userTableLoading = false;
        });
    },
    packParams() {
      let form = this.searchLogForm;
      if (form.userId != null && form.userId != "") {
        if (isNaN(paramsForm.userId)) {
          this.$message.error("客户编号是数字");
          return;
        }
      }
      this.queryParams.logId = form.logId;
      this.queryParams.userId = form.userId;
      this.queryParams.username = form.username;
      this.queryParams.logType = form.logType;
      this.queryParams.firstLogDate =
        form.logTime === null ? null : form.logTime[0];
      this.queryParams.secLogDate =
        form.logTime === null ? null : form.logTime[1];
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();

      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;

      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "年" + month + "月" + day + "日";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();

        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;

        return (
          year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
        );
      }
    },
  },
};
</script>

<style>
.search-block {
  margin-bottom: 20px;
}

.el-collapse-item__header {
  color: #4091ff !important;
  font-size: 15px;
}

.search-item {
  display: inline-block;
  margin-left: 20px;
}

.el-form-item__label {
  padding-bottom: 0px !important;
}

.search-button {
  float: right;
  margin-bottom: 20px;
}
</style>